<template>
  <div class="common-layout">
    <el-container>
      <el-container>
        <el-aside width="200px"><NavMenu></NavMenu></el-aside>
        <el-container>
          <el-header height="60px"><Header></Header></el-header>
            <el-main>
              <el-card class="box-card" shadow="hover">
                <template #header>
                  <div class="card-header">
                    <el-breadcrumb separator="/">
                      <el-breadcrumb-item :to="{ path: '/filing' }">报备人员管理</el-breadcrumb-item>
                      <el-breadcrumb-item>添加报备人员</el-breadcrumb-item>
                    </el-breadcrumb>
                  </div>
                </template>
                  <el-form
                    label-position="top"
                    :model="formFilingAdd"
					ref="addForm"
                    style="max-width: 930px"
                  >
                  <div class="row1">
                    <div class="row1-col1">
                      <el-form-item label="姓名" prop="name" style="width: 250px;">
                        <el-input v-model="formFilingAdd.name" placeholder="请输入标题"/>
                      </el-form-item>
                      <el-form-item label="电话" prop="telephone" style="width: 250px;">
                        <el-input v-model="formFilingAdd.telephone" placeholder="请输入标题"/>
                      </el-form-item>
                      <el-form-item label="出发日期" prop="departureDate">
                        <el-date-picker
                          v-model="formFilingAdd.departureDate"
                          type="date"
                          placeholder="出发日期"
                          format="YYYY/MM/DD"
                          value-format="YYYY-MM-DD"
                          style="width: 250px;"
                        />
                      </el-form-item>
                    </div>

                    <div class="row1-col2">
                      <el-form-item label="身份证" prop="idCard" style="width: 250px;">
                        <el-input v-model="formFilingAdd.idCard" placeholder="请输入标题"/>
                      </el-form-item>
                      <el-form-item label="性别" prop="sex">
                        <el-radio-group v-model="formFilingAdd.sex">
                          <el-radio label="男">男</el-radio>
                          <el-radio label="女">女</el-radio>
                        </el-radio-group>
                      </el-form-item>
                      <el-form-item label="到达日期" prop="arrivalDate">
                        <el-date-picker
                          v-model="formFilingAdd.arrivalDate"
                          type="date"
                          placeholder="到达日期"
                          format="YYYY/MM/DD"
                          value-format="YYYY-MM-DD"
                          style="width: 250px;"
                        />
                      </el-form-item>
                    </div>
                  </div>
                  <div class="row2">
                    <el-form-item label="返前居住地" prop="beforePlace">
                      <el-cascader
                      :options="options"
                      v-model="selectedOptions"
                      @change="handleChange"
                      style="width: 400px"
                      placeholder="选择返前省市区(县)">
                      </el-cascader>
                    </el-form-item>
                    <el-form-item label="详细地址" style="width: 750px;" prop="detailedAddress" >
                      <el-input v-model="formFilingAdd.detailedAddress" placeholder="请输入详细地址"/>
                    </el-form-item>
                    <el-form-item label="交通方式" prop="vehicle">
                      <el-select v-model="formFilingAdd.vehicle" placeholder="选择交通方式">
                        <el-option value="火车"/>
                        <el-option value="飞机"/>
                        <el-option value="轮船"/>
                        <el-option value="长途汽车"/>
                        <el-option value="高铁"/>
                        <el-option value="其他"/> 
                      </el-select>
                    </el-form-item>
                    <div class="track-style">
                      <el-form-item label="到返轨迹" prop="track">
                        <el-input
                          v-model="formFilingAdd.track"
                          :rows="5"
                          type="textarea"
                          placeholder="请填写到返轨迹"
                        />
                      </el-form-item>
                    </div>
                  </div>
                  <div class="btn-group">
                    <el-form-item >
                      <el-button type="primary" @click="addFiling">添加</el-button>
                      <el-button @click="clear">取消</el-button>
                    </el-form-item>
                  </div>
                </el-form>
            </el-card>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import NavMenu from '@/components/NavMenu.vue'
import Header from '@/components/Header.vue'

import { regionData, CodeToText } from 'element-china-area-data'
import { ElMessage } from "element-plus";

export default {
  name: 'HomeView',
  components: {
    NavMenu,
    Header
  },
  data() {
    return {
      formFilingAdd: {
        id:'',
        name:'',
        idCard:'',
        sex:'',
        telephone :'',                        
        departureDate :'',
        arrivalDate :'',
        beforePlace :'',
        detailedAddress :'',
        vehicle :'',
        track :'',
        createTime :'',
    },
        options: regionData,
        selectedOptions: []
    }
  },
  methods: {
    //添加报备人员
    addFiling(){
      var that = this;
      this.axios
      .post("/filing/filingadd", this.formFilingAdd)
      .then(function(){
          ElMessage({type: 'success', message: "添加成功"});
          that.clear();
          that.$router.push({name: "filing"});
      })
      .catch(function (error) {
          console.log(error);
      });
      
    },
    //清空
    clear(){
      this.$refs['addForm'].resetFields();
      this.selectedOptions=[];
    },
    handleChange (value) {
      this.getCodeToText(null, value)
    },
    getCodeToText (codeStr, codeArray) {
		if (null === codeStr && null === codeArray) {
      return null;
		} else if (null === codeArray) {
      codeArray = codeStr.split(",");
		}
		let area = "";
		switch (codeArray.length) {
      case 1:
			area += CodeToText[codeArray[0]];
			break;
      case 2:
			area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]];
			break;
      case 3:
			area +=
			CodeToText[codeArray[0]] +
			"/" +
			CodeToText[codeArray[1]] +
			"/" +
			CodeToText[codeArray[2]];
			break;
      default:
			break;
		}
		this.formFilingAdd.beforePlace = area
		return area;
    }
	}
	}

</script>

<style scoped>
:deep(.el-header) { 
  padding: 0;
}
.box-card{
  height: 500px;
  overflow-y:auto;
}
.el-breadcrumb-item{
    float: left;
    line-height: 0px;
    color: var(--el-text-color-regular);
}
.row1{
  display: flex;
  justify-content: center;
}
.row1-col1{
  width: 420px;
}
.row1-col2{
  width: 320px;
}
.row2{
  margin-left: 80px;
}
.track-style{
  width: 750px;
}
.btn-group{
  float: right;
  margin-right: 40px;
  height: 61px;
  margin-top: 15px;
}
</style>
